<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=720, user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-title" content="">
    <title></title>
    <link href="css/style02.css" rel="stylesheet" />
    <link href="css/base.css" rel="stylesheet" />
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="http://h5.cailianxinwen.com/wxjson/js/wxapi-vote.js?v=1.01" type="text/javascript"></script>
    <style>
        #listbox3 {
            width: 100%;
            height: 97px;
            position: fixed;
            bottom: 97px;
            background-color: #eab214;
            font-size: 30px;
            display: flex;
            align-items: center;
            color: #fff;
            padding: 0 10px;
            justify-content: space-between;
        }

        .mask {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            /*一般遮罩随便设置一个颜色*/
            z-index: 100;

            display: flex;
            align-items: center;
            justify-content: center;
        }

        .alert {
            border: 1px solid #fff;
            border-radius: 20px;
            width: 400px;
            height: 300px;
            background-color: #eab214;
            z-index: 101;
            font-size: 30px;
            color: #fff;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
    </style>
    <style>
        input {
            outline-color: invert;  
            outline-style: none;   
            outline-width: 0px;   
            border: none;
            border-style: none;
            text-shadow: none;
            -webkit-appearance: none; 
            -webkit-user-select: text;
            outline-color: transparent; 
            box-shadow: none;
          }
    
        .inputbox{
            width: 405px;
            height: 48px;
            margin: 40px auto 0;
            
        }
        .inputbox .search_input{
            width: 337px;
            height: 48px;
            border-top-left-radius: 24px;
            border-bottom-left-radius: 24px;
            border-top: solid 2px #d9730f;
            border-left: solid 2px #d9730f;
            border-bottom: solid 2px #d9730f;
            border-right: 0;
            line-height: 48px;
            background: #fff;
            padding: 0 20px;
            font-size:24px;
            float: left;
        }
        .inputbox a{
            display: block;
            float: left;
            width: 52px;
            height: 48px;
            background: #fcc257;
            text-align: center;
            line-height: 48px;
            color: #fff;
            font-size: 28px;
            border-top-right-radius: 24px;
            border-bottom-right-radius: 24px;
        }
        
        </style>
    <style type="text/css">
        html,
        body,
        header,
        p,
        main,
        p,
        span,
        ul,
        li {
            margin: 0;
            padding: 0;
        }


        .refreshText {
            position: absolute;
            width: 100%;
            line-height: 50px;
            text-align: center;
            left: 0;
            top: 0;
            transform: translateY(-50px);
        }
    </style>
</head>

<body>


    <div class="mask" style="display: none;">
        <div class="alert">
            <span id="alertmsg">错误</span>
            <div id="close"
                style="border: 2px solid #fff;width:140px;text-align:center;padding:10px 20px;margin-top:70px;border-radius: 20px;">
                关闭</div>
        </div>
    </div>

    <div class="wrap">
        <p class="refreshText"></p>
        <div class="">
            <img src="img/bg02.jpg" id="top">
            <div class="conbox">
                <img src="img/img_title01.png" class="img_title01">
                <div class="con01">
                    <ul>
                        <li class="org" id="cnum">00</li>
                        <li class="org" id="num">00000</li>
                        <li class="org" id="devnum">00000</li>
                        <li>参与产品</li>
                        <li>累计票数</li>
                        <li>累计访问</li>
                    </ul>
                    <div class="clear"></div>
                    <a href="">
                        <div class="btn_end">活动进行中</div>
                    </a>
                </div>
                <img src="img/img_title02.png" class="img_title02">
                <div class="con02">
                    <ul class="iconbox">

                        <li><img src="img/icon03.png"></li>
                    </ul>
                    <ul class="listbox">
                        <li>说明：网络投票分两批次进行。本次进行投票的156件作品为10月23日前所收到的合格作品。</li>
                    </ul>
                </div>
                <div class="con02">
                    <ul class="iconbox">
                        <li><img src="img/icon01.png"></li>
                        <li><img src="img/icon02.png"></li>
                        <li><img src="img/icon03.png"></li>
                    </ul>
                    <ul class="listbox">
                        <li id="starttime">开始时间：2023年xx月xx日xx时</li>
                        <li id="endtime">结束时间：2023年xx月xx日xx时</li>
                        <li>活动规则：下载彩练新闻客户端，每位用户每天可投票一次，最多同时可投10票</li>
                    </ul>
                </div>
                <div class="inputbox" >
                    <input class="search_input" type="text" placeholder="请输入关键字">
                <a  class="btn_input" id="btn">搜</a>	
                </div>
                <ul class="listbox2" id="refreshContainer">


                </ul>
                <div class="clear"></div>
            </div>
            <div id="listbox3" style="display: none;">
                <span></span>
                <img src="img/btn_tp.png" id="btnvote">
            </div>

        </div>
    </div>
    <ul class="tab">
        <!--<a href="list.html"><li><img src="img/tab01.jpg"></li></a>-->
        <a href="list.html">
            <li><img src="img/tab01-1.jpg"></li>
        </a>
        <a href="order.html">
            <li><img src="img/tab02.jpg"></li>
        </a>
        <!--<a href="list2.html"><li><img src="img/tab02-1.jpg"></li></a>-->
        <div class="clear"></div>
    </ul>
</body>
<script>

    /*
        (function () {
            var wxUserInfo = localStorage.getItem("jlrbUserInfo");
            var href = location.href;
            if(!wxUserInfo){
                if(href.indexOf("code=") === -1){ //如果没有code参数就直接调用授权函数
                    get_weixin_code_login();//调用授权函数
                }else{ //如果有拿取code值
                    getUrlCode();
                    var local = window.location.href;
                    this.code = this.getUrlCode().code;
             
                   if (this.code == null || this.code == '' || this.code == 'undefined') {
                       window.location.href = url;
                   }
                 getWxUserInfo(this.code);
               }
            }
            
        })();
    */
    function get_weixin_code_login() {

        var uri = window.location.href;
        var appid = 'wx77d980df3722c42a';//自己公众号的appid
        var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' +
            encodeURIComponent(uri) + '&response_type=code&scope=snsapi_userinfo&state=54322321#wechat_redirect';
        window.location.href = url;

        // 这里走完就是已经授权了。如果授权了就会url中带有code
    }

    //获取url参数
    function getUrlCode() {
        var url = location.search;
        this.winUrl = url;
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            var strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }

    /**
   42  * 授权后获取用户的基本信息
   43  */
    function getWxUserInfo(coDe) {

        $.ajax({
            type: "post",
            url: 'https://www.cailianxinwen.com/app/vote/getOpenid?code=' + coDe,
            dataType: "json",
            //jsonp: "jsoncallback",
            success: function (json) {
                console.log(json)
                localStorage.setItem('jlrbUserInfo', JSON.stringify(json));
            },
            error: function (err) {
                console.log(err)
            }
        });
    };
</script>
<script>

    //$("h2:contains('上')").parent().parent().html()
    //  var c=  		$("h2:contains('上')").length
    //  console.log(c)
    var count = 0
    var id = 0
    var voteid = ''
    var s = ''
    var e = ''
    var datas = ''
    var arr = [];
    var pagesize=10
    var pagetotal=''
    var page=0
    getvotelist()
    function getvotelist() {
        $.ajax({
            type: "post",
            url: 'https://www.cailianxinwen.com/app/vote/getVoteItemListASC?voteId=498',
            dataType: "json",
            //jsonp: "jsoncallback",
            success: function (json) {
                var _html = '';
                var l = json['items'].length
                if (l < 10 && l != 0) {
                    for (var i = 0; i < l; i++) {
                        _html += '<li class="float_left">'
                        _html += '<a href="listshow.html?id=' + json['items'][i].id + '&votenum=' + json['items'][i].votenum + '&pnum=' + json['items'][i].num + '&userid=&num=' + json['items'][i].votenum + '">'
                        _html += '<div class="img_box">'

                        _html += '<img src="http://app.jlrbyy.cn/uploadfile/' + json['items'][i].itemimg + '" class="list_img">'
                        _html += '</div></a>'

                        _html += '<h2>' + json['items'][i].itemcon + '</h2>'
                        _html += '<h3>' + json['items'][i].businessname + '</h3>'
                        _html += '<h4>' + json['items'][i].votenum + '票</h4>'
                        _html += '<a href="#" class="btn_xz" id="' + json['items'][i].id + '"><img src="img/btn_xz.png"></a>'
                        _html += '	</li>'

                    }
                }
                else {
                    for (var i = 0; i < 10; i++) {
                        _html += '<li class="float_left">'
                        _html += '<a href="listshow.html?id=' + json['items'][i].id + '&votenum=' + json['items'][i].votenum + '&pnum=' + json['items'][i].num + '&userid=&num=' + json['items'][i].votenum + '">'
                        _html += '<div class="img_box">'
                        _html += '<img src="http://app.jlrbyy.cn/uploadfile/' + json['items'][i].itemimg + '" class="list_img">'
                        _html += '</div></a>'
                        _html += '<h2>' + json['items'][i].itemcon + '</h2>'
                        _html += '<h3>' + json['items'][i].businessname + '</h3>'
                        _html += '<h4>' + json['items'][i].votenum + '票</h4>'
                        _html += '<a href="#" class="btn_xz" id="' + json['items'][i].id + '"><img src="img/btn_xz.png"></a>'
                        _html += '	</li>'
                    }
                }

             
                datas = json['items']
                console.log(json)
                json1 = json.items
          

                var num = 0
                for (let key in json1) {

                    arr.push(json1[key]);
                  //  num += parseInt(jsojson1n['items'][i].votenum)
                  num+=json1[key].votenum
                }
                 arr1=arr.slice(154,170)

                $('#devnum').text(json['devnum'])

                $('.listbox2').html(_html)
                $('#num').text(num)
                $('#cnum').text(json['items'].length)
                $('#starttime').text('开始时间：' + json.starttime)
                $('#endtime').text('结束时间：' + json.endtime)
                s = json.starttime
                e = json.endtime
            },
            error: function (err) {
                console.log(err.statusText)
                if (err.statusText == 'error') {
                    alert('链接超时')
                }
            }
        });
    }
    $(document).on('click', '.btn_xz', function (e) {
        if ($(this).children('img').attr('src') == 'img/btn_xz2.png') {
            $(this).children('img').attr('src', 'img/btn_xz.png')
            count--
            if (count == 0) {
                $('#listbox3').hide()
                voteid = ''
            }
            voteid = voteid.replace(',' + $(this).attr('id'), '')
            console.log(voteid)
            $('#listbox3 span').html('您已选择' + count + '件')
        }
        else {

            $(this).children('img').attr('src', 'img/btn_xz2.png')
            count++
            if (count > 0) {
                $('#listbox3').show()
            }
            voteid += ',' + $(this).attr('id')
            console.log(voteid)
            $('#listbox3 span').html('您已选择' + count + '件')
        }
    });

    $('#btnvote').click(function () {
        var time = checktime(s, e)
        console.log(time)
        if (time) {
            temp = voteid.substring(1, voteid.length)
            var arr = temp.split(',')
            console.log(arr.length)

            if (arr.length > 10) {
                $('.mask').show()
                $('#alertmsg').text('最多选择10项')
            }
            else {
                console.log(localStorage.getItem('jlrbUserInfo'))
                if (localStorage.getItem('jlrbUserInfo') == null) {
                    window.location.href = 'index1.html'
                }
                else {
                    govote(temp)
                }
            }
        }
    })
    function checktime(a, b) {
        var date1 = Date.parse(new Date(a));
        var date2 = Date.parse(new Date(b));
        var timestamp = Date.parse(new Date());
        var r = true
        if (timestamp < date1) {
            $('.mask').show()
            $('#alertmsg').text('活动尚未开始')
            r = false
        }
        if (timestamp > date2) {
            $('.mask').show()
            $('#alertmsg').text('活动已结束')
            r = false
        }
        return r

    }
    $('#close').click(function () {
        $('.mask').hide()
        location.reload()
    })
    function govote(ids) {
        $.ajax({
            type: "post",
            url: 'https://www.cailianxinwen.com/app/vote/performVote?openid=' + JSON.parse(localStorage.getItem('jlrbUserInfo')).openid + '&token=' + JSON.parse(localStorage.getItem('jlrbUserInfo')).token + '&voteId=498&itemids=' + temp,
            dataType: "json",
            //jsonp: "jsoncallback",
            success: function (json) {
                console.log(json)
                $('.mask').show()
                switch (json) {
                    case 0: $('#alertmsg').text('投票失败<0>')
                         break;
                    case 1:
                        $('#alertmsg').text('投票成功')
                        break;
                    case 2:
                        $('#alertmsg').text('今日已投票')
                        break;
                    case 3:
                        $('#alertmsg').text('投票失败<3>')
                        break;
                    case 4:
                        $('#alertmsg').text('请至少选择4项')
                        break;
                }

            },
            error: function (err) {
                console.log(err)
            }
        });
    };
</script>
<script type="text/javascript">
    window.onload = function () {
        //1.获取到列表的dom，刷新显示部分的dom，列表父容器的dom
        let container = document.querySelector('#refreshContainer');
        let refreshText = document.querySelector('.refreshText');
        let parent = document.querySelector('.wrap');

        //2.定义一些需要常用的变量
        let startY = 0;//手指触摸最开始的Y坐标
        let endY = 0;//手指结束触摸时的Y坐标

        //3.给列表dom监听touchstart事件,得到起始位置的Y坐标
        parent.addEventListener('touchstart', function (e) {
            startY = e.touches[0].pageY;
        });
        //4.给列表dom监听touchmove事件，当移动到一定程度需要显示上面的文字
        parent.addEventListener('touchmove', function (e) {
            if (isTop() && (e.touches[0].pageY - startY) > 0) {
                console.log('下拉了');
                refreshText.style.height = "50px";
                parent.style.transform = "translateY(50px)";
                parent.style.transition = "all ease 0.5s";
                refreshText.innerHTML = "释放立即刷新...";
            }
        });
        //5.给列表dom监听touchend事件，此时说明用户已经松开了手指，应该进行异步操作了
        parent.addEventListener('touchend', function (e) {
            if (isTop()) {
                refreshText.innerHTML = "正在刷新...";
                setTimeout(function () {
                    parent.style.transform = "translateY(0)";
                    console.log('成功刷新');
                }, 2000)
            }
            return;
        })
        function isTop() {
            var t = document.documentElement.scrollTop || document.body.scrollTop;
            return t === 0 ? true : false;
        }
    }

    $('body').scroll(function() {

        // 判断是否滚动到页面底部
        if ($('body').scrollTop() + $(window).height() >= $(document).height()) {
          console.log('a')
          page++
          _html=''
        var arr1=  arr.slice(pagesize*page,pagesize*(page+1))
        for (var i = 0; i < pagesize; i++) {
            _html += '<li class="float_left">'
            _html += '<a href="listshow.html?id=' + arr1[i].id + '&votenum=' + arr1[i].votenum + '&pnum=' + arr1[i].num + '&userid=&num=' + arr1[i].votenum + '">'
            _html += '<div class="img_box">'
            _html += '<img src="http://app.jlrbyy.cn/uploadfile/' + arr1[i].itemimg + '" class="list_img">'
            _html += '</div></a>'
            _html += '<h2>' + arr1[i].itemcon + '</h2>'
            _html += '<h3>' + arr1[i].businessname + '</h3>'
            _html += '<h4>' + arr1[i].votenum + '票</h4>'
            _html += '<a href="#" class="btn_xz" id="' + arr1[i].id + '"><img src="img/btn_xz.png"></a>'
            _html += '	</li>'
        }
        $('.listbox2').append(_html)
        }
      });
      $('.btn_input').click(function(){
        if(status==1)
        {
            var arr=[]
            for(let key in datas){
                     
                arr.push(datas[key]);
                
                }
            console.log(arr)
            var temp=$('.search_input').val()
            console.log(temp)
            var getlist = arr.filter(
                (item)=>item.itemcon.includes(temp)//qstring就是你搜索的关键字
            );
            console.log(getlist)
            _html=''
            for(var i=0;i<getlist.length;i++)
            {
                _html+='<li class="float_left">'
                _html+='<a href="listshow.html?id='+getlist[i].id+'&votenum='+getlist[i].votenum+'&pnum='+getlist[i].num+'&userid=&num='+getlist[i].votenum+'">'
                _html+='<div class="img_box">'
        
                _html+='<img src="http://app.jlrbyy.cn/uploadfile/'+getlist[i].itemimg+'" class="list_img">'
                _html+='</div></a>'
    
                _html+='<h2>'+getlist[i].itemcon+'</h2>'
                _html+='<h3>'+getlist[i].businessname+'</h3>'
                _html+='<h4>'+getlist[i].votenum+'票</h4>'
                _html+='<a href="#" class="btn_xz" id="'+getlist[i].id+'"><img src="img/btn_xz.png"></a>'
                _html+='	</li>'
            }
            $('.listbox2').html(_html)
        }
        else{
            alert('数据加载中')
    
        }
    })
</script>

</html>